<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>旅游博客</title>
    <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:100,300,400">
    <link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">                                 
    <link rel="stylesheet" href="css/magnific-popup.css">                                  
    <link rel="stylesheet" href="css/templatemo-style.css">
    <button></button>
</head>

    <body id="top" class="home">
       
        <div class="container-fluid">
            <div class="row">
              
                <div class="tm-navbar-container">
                
                <!-- navbar   -->
                <nav class="navbar navbar-full navbar-fixed-top">

                    <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
                        &#9776;
                    </button>
                        
                    <div class="collapse navbar-toggleable-sm" id="tmNavbar">                            

                        <ul class="nav navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#top">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-2">博文</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-3">相册</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#tm-section-4">抽奖</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link external" href="columns.html">关于我</a>
                            </li>
                            <button>aaa</button>
                        </ul>

                    </div>
                  
                </nav>

              </div>  

           </div>

           <div class="row">
                <div class="tm-intro">

                    <section id="tm-section-1">                        
                        <div class="tm-container text-xs-center tm-section-1-inner">
                            <img src="img/tm-lumino-logo.png" alt="Logo" class="tm-logo">
                            <h1 class="tm-site-name">HELLO</h1>
                            <p class="tm-intro-text">welcome to my bolg</p>
                              
                        </div>                                               
                   </section>

                </div>
            </div>

            <div class="row gray-bg">
                
                <div id="tm-section-2" class="tm-section">
                    <div class="tm-container tm-container-wide">
                        <div class="tm-news-item">
                            
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container">
                                <img src="img/tm-600x300-01.jpg" alt="Image" class="img-fluid tm-news-item-img">  
                            </div>
                            
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container">
                                <h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
                                <p class="tm-news-text">Lumino theme is a Bootstrap 4.0 mobile compatible layout for your website. Check "columns" page for one, two, three columns and tables.</p>
                                <a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Preview</a>
                            </div>
                        </div>

                        <div class="tm-news-item">

                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 flex-order-2 tm-news-item-img-container">
                                <img src="img/tm-600x300-02.jpg" alt="Image" class="img-fluid tm-news-item-img">
                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container flex-order-1">
                                <h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
                                <p class="tm-news-text">You may download, modify and use this template as you wish. Lumino HTML5 template is a fully responsive mobile ready for any kind of website.</p>
                                <a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Detail</a>
                            </div>
                        </div>

                        <div class="tm-news-item">

                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container">
                                <img src="img/tm-600x300-03.jpg" alt="Image" class="img-fluid tm-news-item-img">
                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container">
                                <h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
                                <p class="tm-news-text">Credit goes to <a rel="nofollow" href="http://unsplash.com" target="_parent">Unsplash</a> for images used in this website template. Nulla sit amet tristique lacus. Etiam blandit ex vitae mauris gravida.</p>
                                <a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Read</a>
                            </div>
                        </div>
                    </div>                    
               </div>

           </div> <!-- row -->
           <div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网站模板">网站模板</a></div>

            <div class="row">

                <section id="tm-section-3" class="tm-section">
                    <div class="tm-container text-xs-center">
                        
                        <h2 class="blue-text tm-title">Lorem ipsum dolor sit amet</h2>
                        <p class="margin-b-5">Etiam at rhoncus nisl. Nunc rutrum ac ante euismod cursus.</p>
                        <p>Suspendisse imperdiet feugiat massa nex iaculis.</p>
                       
                        <div class="tm-img-grid">
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-01.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-01.jpg" alt="Image" class="img-fluid tm-gallery-img"> <!-- 300x200 -->
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-07.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-07.jpg" alt="Image" class="img-fluid tm-gallery-img">  
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-02.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-02.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>                           
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-09.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-09.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-03.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-03.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-08.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-08.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-10.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-10.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-04.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-04.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-05.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-05.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-11.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-11.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-06.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-06.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                            <div class="tm-gallery-img-container">
                                <a href="img/tm-450x300-12.jpg" class="tm-gallery-img-link">
                                    <img src="img/tm-450x300-12.jpg" alt="Image" class="img-fluid tm-gallery-img">
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

            </div> <!-- row -->

            <div class="row gray-bg">

                <section id="tm-section-4" class="tm-section">
                    <div class="tm-container">

                        <h2 class="blue-text tm-title text-xs-center">Contact Us</h2>
                      
                        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
                            <form action="index.html" method="post" class="tm-contact-form">                                
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-left">
                                    <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name"  required/>
                                </div>
                                <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-right">
                                    <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email"  required/>
                                </div>
                                <div class="form-group">
                                    <input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject"  required/>
                                </div>
                                <div class="form-group">
                                    <textarea id="contact_message" name="contact_message" class="form-control" rows="6" placeholder="Message" required></textarea>
                                </div>
                            
                                <button type="submit" class="btn tm-light-blue-bordered-btn pull-xs-right">Submit</button>                          
                            </form>   
                        </div> <!-- col -->
                        
                        <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 margin-top-xs-50">
                            <h3 class="light-blue-text tm-subtitle">Etiam at rhoncus nisl</h3>
                            <p>Nunc rutrum ac ante euismod cursus. Suspendisse imperdiet feugiat massa nec iaculis</p>
                            <p>
                                Tel: <a href="tel:0100200340">010-020-0340</a><br>
                                Email: <a href="mailto:info@company.com">info@company.com</a>
                            </p>
                        </div>
                    </div>                    
                </section>

                <!-- footer -->
                <footer class="tm-footer">                
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                        <p class="text-xs-center tm-footer-text">Copyright &copy; 2016 Company Name.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>                    
                    </div>                
                </footer>  

            </div> 
           
        </div> 
        
        
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/tether.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.singlePageNav.min.js"></script>     
        <script src="js/jquery.magnific-popup.min.js"></script>    
        <script>
            $(document).ready(function(){

                var mobileTopOffset = 54;
                var desktopTopOffset = 80;
                var topOffset = desktopTopOffset;

                if($(window).width() <= 767) {
                    topOffset = mobileTopOffset;
                }
                
                /* Single page nav
                -----------------------------------------*/
                $('#tmNavbar').singlePageNav({
                   'currentClass' : "active",
                    offset : topOffset,
                    'filter': ':not(.external)'
                }); 

                /* Handle nav offset upon window resize
                -----------------------------------------*/
                $(window).resize(function(){
                    if($(window).width() <= 767) {
                        topOffset = mobileTopOffset;
                    } 
                    else {
                        topOffset = desktopTopOffset;
                    }

                    $('#tmNavbar').singlePageNav({
                        'currentClass' : "active",
                        offset : topOffset,
                        'filter': ':not(.external)'
                    });
                });
                

                /* Collapse menu after click 
                -----------------------------------------*/
                $('#tmNavbar a').click(function(){
                    $('#tmNavbar').collapse('hide');
                });

                /* Turn navbar background to solid color starting at section 2
                ---------------------------------------------------------------*/
                var target = $("#tm-section-2").offset().top - topOffset;

                if($(window).scrollTop() >= target) {
                    $(".tm-navbar-container").addClass("bg-inverse");
                }
                else {
                    $(".tm-navbar-container").removeClass("bg-inverse");
                }

                $(window).scroll(function(){
                   
                    if($(this).scrollTop() >= target) {
                        $(".tm-navbar-container").addClass("bg-inverse");
                    }
                    else {
                        $(".tm-navbar-container").removeClass("bg-inverse");
                    }
                });


                /* Smooth Scrolling
                 * https://css-tricks.com/snippets/jquery/smooth-scrolling/
                --------------------------------------------------------------*/
                $('a[href*="#"]:not([href="#"])').click(function() {
                    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
                        && location.hostname == this.hostname) {
                        
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
                        
                        if (target.length) {
                            
                            $('html, body').animate({
                                scrollTop: target.offset().top - topOffset
                            }, 1000);
                            return false;
                        }
                    }
                }); 

              
                /* Magnific pop up
                ------------------------- */
                $('.tm-img-grid').magnificPopup({
                    delegate: 'a', // child items selector, by clicking on it popup will open
                    type: 'image',
                    gallery: {enabled:true}            
                });            
            });

        </script>             

</body>
</html>